
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>包&授权文件上传</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" media="screen" />
    <script type="text/javascript" src="bootstrap/js/core.js"></script>
</head>
<body>
<div class="container span7 offset3 well">
    <form id="uploadForm" class="form-horizontal" enctype="multipart/form-data" method="POST" action="javascript:void(0);">
        <fieldset>
            <legend>包&授权文件</legend>
            <div class="control-group">
                <label class="control-label" for="fileToUpload">选择文件:</label>
                <div class="controls">
                    <input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" />
                </div>
            </div>
            <div class="form-actions text-left">
                <button type="button" class="btn btn-primary" id="subBtn">立即上传</button>
            </div>
            <div class="file-list" id="fileList"></div>
        </fieldset>
    </form>
</div>
<script type="text/javascript" src='bootstrap/js/jquery.js'></script>
<script type="text/javascript" src='bootstrap/js/bootstrap.min.js'></script>
<script type="text/javascript">
    var files = [];
    var $uploadForm = $('#uploadForm');
    var $fileToUpload = $('#fileToUpload');
    var $fileList = $('#fileList');
    var $barList = null;
    var index = 0;
    function fileSelected() {
        var fs = $fileToUpload.get(0).files;
        var html = '';
        for(var i = 0; i < fs.length; i++) {
            var file = fs[i];
            files.push(file);
            var fileSize = 0;
            if (file.size > 1024 * 1024) {
                fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
            } else {
                fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
            }
            html += '<div class="file-item well"><div class="progress"><div class="bar" style="text-align: left;">0%</div></div>' +
                    '<div><div class="span2">'+ file.name +'</div>' +
                    '<div class="span2">'+ fileSize +'</div>' +
                    '<div class="span2">'+ file.type +'</div>'+
                    '<a href="http://192.168.1.157:55757/?fn=signature" style="display: none" id="goback"> 返回 </a></div></div>';
        }
        $fileList.append(html);
        $barList = $('.bar');
    }
    function uploadFile() {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "./get.php", true);
        var fd = new FormData();
        fd.append("fileToUpload", files[index]);
        xhr.send(fd);
    }
    function uploadProgress(evt) {
        if (evt.lengthComputable) {
            var percentComplete = Math.round(evt.loaded * 100 / evt.total) +'%';
            $barList.get(index).innerHTML = percentComplete;
            $barList.get(index).style.width = percentComplete;
            if(percentComplete == '100%') {
                $('#goback').css('display' ,'block');
            }
        }
    }
    function uploadComplete(evt) {
        if(index === files.length - 1) {
            console.log('all');
            return;
        }
        index++;
        uploadFile();
        //alert(evt.target.responseText);
    }

    function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
    }
    function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
    }
    $fileToUpload.change(function() {
        fileSelected();
    });
    $('#subBtn').click(function() {
        uploadFile();
    });
</script>
</body>
</html>